<script lang="ts" setup>
const {base} = defineProps<{
    base: 2 | 4
    activeIdx: number
    links: Array<string>
}>()

// 更改父组件的选中项
defineEmits<{
    (e: 'update:activeIdx', value: number): void
}>()

// 控制选中下划线位置
const lineLeft = computed(() => (base === 2 ? '25%' : '28%'))
const lineWidth = computed(() => (base === 2 ? '50%' : '40%'))

</script>

<template>
    <view my-5 flex items-center justify-around text="24 #4d555d">
    <span v-for="(item, idx) of links" :key="idx" :class="[activeIdx === idx && 'active']"
          @click="$emit('update:activeIdx', idx)">
      {{ item }}
    </span>
    </view>
</template>

<style lang="scss" scoped>
.active {
    position: relative;
    font-size: 24rpx;

    &::after {
        content: '';
        height: 4rpx;
        bottom: -10rpx;
        position: absolute;
        border-radius: 10rpx;
        left: v-bind(lineLeft);
        width: v-bind(lineWidth);
        background-color: #4d555d;
    }
}
</style>
